*{
  padding: 0;
  margin: 0;
}
@mixin box($width,$height){
   width: $width;
   height: $height;
}
@mixin bg($background){
  background: $background;
}
@mixin bg-color($background-color){
  background-color:$background-color ;
}
@mixin font($color,$font-size,$text-align){
  color:$color;
  font-size:$font-size;
  text-align: $text-align;
}
@mixin img($width,$height){
  width: $width;
  height: $height;
}
@mixin position($position,$top,$left){
  position:$position;
  top:$top;
  left:$left;
}
.container{
  //overflow: hidden;
  @include bg-color(#f2f2f2);
  @include box(100%,100vh);
  .head{
      @include bg(-webkit-linear-gradient(left,#f7635a,#fda851));
      @include box(100%,145px);
      @include font(white,25px,center);
    .my{
      padding-top:25px;
      display: inline-block;
    }
  }
    .personal-information{
      @include box(100%,185px);
      @include bg-color(#f2f2f2);
      box-shadow: 0 2px 0 #e1e1e1;
      .personal-information-main{
        margin: auto;
        @include position(absolute,7%,30%);
        //border-radius: 10px;
        @include box(340px,225px);
        @include bg-color(white);
      .personal-img{
        position: relative;
        margin: auto;
        @include box(340px,115px);
        @include bg-color(write);
        border-bottom: 1px solid #ececec;
        .personal-vital{
          background-color: #f7635a;
          margin: auto;
          @include box(340px,115px);
          .person{
            display: inline-block;
            position: relative;
            left: 20px;
            @include box(70px,70px);
            border: 5px solid #ecedea;
            border-radius:50%;
            //margin-left: 5%;
            margin-top: 17px;
            @include bg(-webkit-linear-gradient(left,#f7635a,#fda851));
            .personal-information-img{
              @include img(40px,40px);
              padding-left: 15px;
              padding-top: 15px;
            }
          }
          .personal-new{
            @include position(absolute,30%,38%);
            display: inline-block;
            @include bg-color(write);
            @include box(200px,100px);
            .number,.phone-tel{
              @include font(#a1a1a1,18px,center);
            }
            .number,.phone-tel{
              margin-right:20px;
            }
            .num,.phone-number{
              @include font(#636363,18px,center);
            }
          }
        }
      }
       .personal-way{
         @include box(100%,98px);
          .personal-way-img{
            position: relative;
            //background-color: green;
            @include box(70%,90%);
            margin: auto;
            padding-top: 20px;
            list-style: none;
            .personal-left,.personal-middle,.personal-save,.personal-right{
              @include box(55px,80px);
              display: inline-block;
              .personal-way-one {
                @include img(45px, 45px);
              }
              .pay{
                @include font(#d2d2d2,14px,center);
              }
            }
            .personal-left,.personal-middle,.personal-right,.personal-save{
              position: absolute;
            }
            .personal-left{
              left: 0;
            }
            .personal-right{
              right: 0;
            }
            .personal-middle{
             left: 25%;
            }
            .personal-save{
              right: 25%;
            }
          }

       }
    }

  }
  .main{
    @include box(100%,450px);
    @include bg-color(white);
    .main-one{
      position: relative;
      @include box(100%,75px);
      @include bg-color(white);
      border-bottom: 1px solid #ededed;
      .main-order{
        padding-top: 25px;
        margin-left: 10px;
        display: inline-block;
        @include font(#5f5f5f,18px,center);
      }
      .main-img-one{
        float: left;
        @include img(25px,25px);
        padding-left:25px;
        padding-top: 25px;
      }
      .main-img-two{
        @include img(17px,20px);
        float: right;
        padding-right:25px;
        padding-top: 25px;
      }
    }
    .main-one:before{
      content: "";
      position: absolute;
      @include box(15px,1px);
      @include bg-color(white);
      bottom: -1px;
      left: 0;
    }
    .main-two,.main-three,.main-four,.main-five,.main-six{
      @extend .main-one
    }

  }
  .bottom{
    margin-top: 25px;
    @include box(100vw,65px);
    list-style:none ;
    .bottom-ul{
      position: relative;
      @include box(80%,65px);
      margin: auto;
      background-color: #fda851;
      li{
        @include box(45px,55px);
        display: inline-block;
        padding-right: 15%;
        .bottom-img{
          margin-top: 10px;
          @include box(25px,25px);
        }
        .bottom-new{
          @include font(#d2d2d2,14px,center);
          position: absolute;
          //left:0;
        }
      }
    }

  }

}
